<template>
  <div class="consulting-history">
    <h2>咨询历史</h2>
    
    <!-- 筛选栏 -->
    <div class="filter-section">
      <el-radio-group v-model="statusFilter" @change="handleFilterChange">
        <el-radio-button label="all">全部</el-radio-button>
        <el-radio-button label="success">已完成</el-radio-button>
        <el-radio-button label="cancelled">已取消</el-radio-button>
      </el-radio-group>
    </div>

    <!-- 历史记录列表 -->
    <div class="history-list" v-loading="loading">
      <el-empty v-if="!filteredHistory || filteredHistory.length === 0" description="暂无咨询记录" />
      
      <el-timeline v-else>
        <el-timeline-item
          v-for="record in filteredHistory"
          :key="record.appointmentId"
          :timestamp="record.createTime"
          :type="getTimelineItemType(record.status)"
        >
          <el-card class="history-card">
            <div class="history-header">
              <div class="user-info">
                <div class="user-details">
                  <div class="name-info">
                    <span class="user-name">{{ record.userName }}</span>
                  </div>
                </div>
              </div>
              <el-tag :type="getStatusType(record.status)">
                {{ getStatusText(record.status) }}
              </el-tag>
            </div>

            <div class="history-content">
              <div class="time-info">
                <el-icon><Clock /></el-icon>
                <span>咨询时间：{{ getWeekday(record.weekday) }} {{ record.begTime }}-{{ record.endTime }}</span>
              </div>
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Clock } from '@element-plus/icons-vue'
import { getDoctorHistoryAppointments, HistoryAppointment } from '../../api/history'

const loading = ref(false)
const statusFilter = ref('all')
const historyRecords = ref<HistoryAppointment[]>([])

// 根据筛选条件过滤记录
const filteredHistory = computed(() => {
  if (!historyRecords.value) return []
  if (statusFilter.value === 'all') return historyRecords.value
  return historyRecords.value.filter(record => {
    if (statusFilter.value === 'success') return record.status === 0
    if (statusFilter.value === 'cancelled') return record.status === 5 || record.status === 8
    return true
  })
})

// 获取时间线项目类型
const getTimelineItemType = (status: number) => {
  if (status === 2) return 'success'
  if (status === 6 || status === 7) return 'danger'
  return 'info'
}

// 获取状态标签类型
const getStatusType = (status: number) => {
  if (status === 2) return 'success'
  if (status === 6 || status === 7) return 'danger'
  return 'info'
}

// 获取状态文本
const getStatusText = (status: number) => {
  switch (status) {
    case 0: return '已完成'
    case 1: return '待确认'
    case 2: return '已确认'
    case 3: return '待通过取消'
    case 4: return '对方申请取消'
    case 5: return '取消成功'
    case 6: return '对方拒绝取消'
    case 7: return '已确认'
    case 8: return '取消成功'
    default: return '未知状态'
  }
}

// 获取星期几
const getWeekday = (weekday: number) => {
  const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
  return weekdays[weekday % 7]
}

// 处理筛选变化
const handleFilterChange = () => {
  console.log('当前筛选状态:', statusFilter.value)
  console.log('筛选后的记录:', filteredHistory.value)
}

// 获取历史记录
const fetchHistory = async () => {
  loading.value = true
  try {
    const doctorId = localStorage.getItem('doctorid')
    if (!doctorId) {
      ElMessage.error('获取用户信息失败')
      return
    }
    
    const res = await getDoctorHistoryAppointments(Number(doctorId))
    if (res.code === '200') {
      historyRecords.value = res.data || []
    } else {
      ElMessage.error(res.msg || '获取历史记录失败')
    }
  } catch (error) {
    console.error('获取历史记录失败:', error)
    ElMessage.error('获取历史记录失败')
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  fetchHistory()
})
</script>

<style scoped>
.consulting-history {
  padding: 20px;
}

h2 {
  margin: 0 0 30px;
  font-size: 24px;
  color: #2c3e50;
}

.filter-section {
  margin-bottom: 30px;
}

.history-card {
  margin-bottom: 4px;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.user-name {
  font-size: 16px;
  font-weight: 500;
  color: #2c3e50;
}

.history-content {
  padding: 16px 0;
  border-top: 1px solid #EBEEF5;
}

.time-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #606266;
}
</style>